<style>
.page {
  text-align: center;
  margin-top: 17px;
}
.page1 {
  text-align: center;
  margin-top: 15px;
  overflow-x: hidden;
  overflow-y: auto;
  table-layout: fixed;
}
.ivu-table-overflowX {
  overflow-x: hidden;
}
.demo-drawer-profile {
  font-size: 14px;
}
.demo-drawer-profile .ivu-col {
  margin-bottom: 12px;
}
.myrole {
  margin-left: 10px;
}
.in1 {
  margin-left: 7px;
}
.in2 {
  margin-left: 14px;
}
</style>
<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem to="/main/myInfo">
        <e-icon icon-name="el-icon-s-home"></e-icon>主页
      </BreadcrumbItem>
      <BreadcrumbItem>
        <e-icon icon-name="fa fa-thumbs-o-up"></e-icon>评价管理
      </BreadcrumbItem>
      <BreadcrumbItem>评教分数查看
      </BreadcrumbItem>
    </Breadcrumb>

    <Divider />

    <Select
      class="in1"
      style="width: 200px"
      v-model="evaluateTaskId"
      placeholder="请选择评价任务"
      clearable
    >
      <Option
        v-for="sli in allEvaluateTask"
        :key="sli.id"
        :label="sli.value"
        :value="sli.id"
      ></Option>
    </Select>

    <Button class="in1" type="primary" icon="ios-search" @click="selectEmp"
      >刷新</Button
    >

    <Table
      style="width: 100%"
      context-menu
      show-context-menu
      class="page1"
      ref="selection"
      border
      :columns="columns1"
      :data="data.records"
      :loading="loading"
    >
    </Table>

    <Page
      class="page"
      :total="data.total"
      :current="data.current"
      :page-size="6"
      :page-size-opts="pagesizeopts"
      @on-change="changePage"
      @on-page-size-change="sizeChange"
      show-elevator
      show-total
      show-sizer
    />
    <Modal v-model="value4" width="920">
      <p slot="header">
        <Icon type="ios-information-circle"></Icon>
        <span>员工详情信息</span>
      </p>
      <Table
        style="width: 100%"
        context-menu
        show-context-menu
        class="page1"
        border
        :columns="columns2"
        :data="details"
        :loading="loading2"
      >
      </Table>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      evaluateTaskId: "",
      allEvaluateTask: [], // 评教任务备选项
      //表格加载
      loading: true,
      //树形组件需要的数据对应
      defaultProps: {
        children: "children",
        label: "name",
      },
      //员工详情
      details: [],
      //每页展示条数
      pagesizeopts: [6, 10, 15, 20],
      //存放查询员工empVo的信息
      data: {},
      //查询员工的查询条件
      empQo: {
        pageSize: 6,
        pageIndex: 1,
      },
      scoreQo: {},
      //添加员工确定按钮的一直加载，添加信息不符合要求时不会关闭弹窗
      isLoading: true,
      loading2: true,
      //添加员工时存储员工的信息
      empPO: {},
      //员工详情页面的style
      pStyle: {
        fontSize: "16px",
        color: "rgba(0,0,0,0.85)",
        lineHeight: "24px",
        display: "block",
        marginBottom: "16px",
      },
      //是否显示员工详情页
      value4: false,
      //右键表格的行数
      contextLine: "",
      //员工的表格
      columns2: [
        {
          title: "教师名称",
          key: "teacherName",
          width: 130,
        },
        {
          title: "所属部门",
          key: "teacherRole",
          width: 135,
        },
        {
          title: "学生评分",
          key: "studentScore",
          width: 100,
          render: (h, params) => {
            let iff = true;
            if (params.row.studentScore == 0) {
              iff = false;
            }
            return h("div", [
              iff
                ? params.row.studentScore
                : h(
                    "Tag",
                    "暂未评"
                  ),
            ]);
          },
        },
        {
          title: "教师自评",
          key: "teacherScore",
          width: 100,
          render: (h, params) => {
            let iff = true;
            if (params.row.teacherScore == 0) {
              iff = false;
            }
            return h("div", [
              iff
                ? params.row.teacherScore
                : h(
                    "Tag",
                    "暂未评"
                  ),
            ]);
          },
        },
        {
          title: "同行评分",
          key: "peerScore",
          width: 100,
          render: (h, params) => {
            let iff = true;
            if (params.row.peerScore == 0) {
              iff = false;
            }
            return h("div", [
              iff
                ? params.row.peerScore
                : h(
                    "Tag",
                    "暂未评"
                  ),
            ]);
          },
        },
        {
          title: "教研部评分",
          key: "jiaoYScore",
          width: 120,
          render: (h, params) => {
            let iff = true;
            if (params.row.jiaoYScore == 0) {
              iff = false;
            }
            return h("div", [
              iff
                ? params.row.jiaoYScore
                : h(
                    "Tag",
                    "暂未评"
                  ),
            ]);
          },
        },
        {
          title: "系部评价",
          key: "headScore",
          width: 100,
          render: (h, params) => {
            let iff = true;
            if (params.row.headScore == 0) {
              iff = false;
            }
            return h("div", [
              iff
                ? params.row.headScore
                : h(
                    "Tag",
                    "暂未评"
                  ),
            ]);
          },
        },
        {
          title: "总分",
          key: "totalScore",
          width: 100,
        },
      ],
      columns1: [
        {
          title: "ID",
          key: "id",
          width: 60,
        },
        {
          title: "教师代码",
          key: "code",
          width: 200,
        },
        {
          title: "教师名称",
          key: "name",
          width: 200,
        },
        {
          title: "所属部门",
          key: "deptName",
          width: 220,
        },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            let iff = false;
            if (this.evaluateTaskId != "") {
              iff = true;
            }
            return h("div", [
              iff
                ? h(
                    "Button",
                    {
                      props: {
                        type: "primary",
                        size: "small",
                        icon: "md-glasses",
                      },
                      style: {
                        id: "btn1",
                        marginLeft: "15px",
                      },
                      on: {
                        click: () => {
                          this.show(params.index);
                        },
                      },
                    },
                    "评分详情"
                  )
                : h(
                    "Tag",
                    {
                      style: {
                        marginLeft: "20px",
                      },
                    },
                    "暂无评教分数"
                  ),
              ,
            ]);
          },
        },
      ],
    };
  },
  created() {
    //页面加载时
    //查询员工
    this.selectEmp();
    this.getAllEvaluateTask();
  },
  methods: {
    //弹出框点取消时
    cancel() {},
    //查询员工
    selectEmp() {
      this.loading = true;
      this.$axios
        .post("/emp/listPaged", this.empQo)
        .then((result) => {
          this.data = result.data.data;
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //改变页数时
    changePage(e) {
      //变更查询时的页数条件
      this.empQo.pageIndex = e;
      this.selectEmp();
    },

    //员工详情信息
    show(index) {
      this.value4 = true;
      this.loading2 = true;
      this.details = [];
      this.scoreQo = {
        teacherId: this.data.records[index].id,
        evaluateTaskId: this.evaluateTaskId,
      };
      console.log(this.scoreQo);

      this.$axios
        .post("/evaluateRecord/showScore", this.scoreQo)
        .then((result) => {
          if (result.data.data.totalScore > 0) {
            this.details.push(result.data.data);
          }
          this.loading2 = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //关闭弹窗时，清除empPO信息
    cancel() {
      this.empPO = {};
    },
    getAllEvaluateTask() {
      this.loading = true;
      var _this = this;
      this.$axios
        .get("/evaluateRecord/listAllEvaluateTask")
        .then((result) => {
          _this.loading = false;
          _this.allEvaluateTask = result.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //改变页面显示数据大小后
    sizeChange(e) {
      this.empQo.pageSize = e;
      this.selectEmp();
    },
  },
};
</script>